<!--
 * @Description: 堆叠分组柱状图-折线图
 * @Author: xjc
 * @Date: 2022-06-21 09:51:22
 * @LastEditTime: 2022-06-21 10:47:30
 * @LastEditors: xjc
-->
<template>
  <div id="stacked-grouped-container" />
</template>

<script setup>
import {onMounted} from 'vue'
// eslint-disable-next-line no-undef
const {DualAxes} = G2Plot

onMounted(() => renderHignlight())

function renderHignlight() {
  const columnData = [
    {name: 'London', month: 'Jan.', value: 12.9, type: '语文'},
    {name: 'London', month: 'Jan.', value: 10.9, type: '数学'},
    {name: 'London', month: 'Jan.', value: 120.9, type: '英语'},
    {name: 'Berlin', month: 'Jan.', value: 12.4, type: '美术'},
    {name: 'Berlin', month: 'Jan.', value: 12.4, type: '线性代数'},
    {name: 'beijing', month: 'Jan.', value: 12.4, type: '高数'},
    {name: 'London', month: 'Feb.', value: 2.9, type: '语文'},
    {name: 'London', month: 'Feb.', value: 5.9, type: '数学'},
    {name: 'London', month: 'Feb.', value: 10.9, type: '英语'},
    {name: 'Berlin', month: 'Feb.', value: 22.4, type: '美术'},
    {name: 'Berlin', month: 'Feb.', value: 32.4, type: '线性代数'},
    {name: 'beijing', month: 'Feb.', value: 42.4, type: '高数'},
    {name: 'London', month: 'Mar.', value: 2.9, type: '语文'},
    {name: 'London', month: 'Mar.', value: 5.9, type: '数学'},
    {name: 'Berlin', month: 'Mar.', value: 22.4, type: '美术'},
    {name: 'Berlin', month: 'Mar.', value: 32.4, type: '线性代数'},
    {name: 'beijing', month: 'Mar.', value: 42.4, type: '高数'},
  ]
  const lineData = [
    {name: '福老师', month: 'Jan.', value: 12.9, type: '美术'},
    {name: '逍老师', month: 'Jan.', value: 1.4, type: '线性代数'},
    {name: '新老师', month: 'Jan.', value: 2.4, type: '高数'},
    {name: '福老师', month: 'Feb.', value: 18.9, type: '美术'},
    {name: '逍老师', month: 'Feb.', value: 13.4, type: '线性代数'},
    {name: '新老师', month: 'Feb.', value: 15.4, type: '高数'},
    {name: '福老师', month: 'Mar.', value: 8.9, type: '美术'},
    {name: '逍老师', month: 'Mar.', value: 6.4, type: '线性代数'},
    {name: '新老师', month: 'Mar.', value: 5.4, type: '高数'},
  ]
  
  const dualAxes = new DualAxes('stacked-grouped-container', {
    data: [columnData, lineData],
    xField: 'month',
    yField: ['value', 'value'],
    geometryOptions: [
      {
        geometry: 'column',
        isGroup: true,
        isStack: true,
        seriesField: 'type',
        groupField: 'name',
      },
      {
        geometry: 'line',
        seriesField: 'name',
        isStack: true,
        smooth: true,
      },
    ],
    tooltip: false,
  })

  dualAxes.render()
}
</script>
